<template>
  <p>App</p>
  <ul>
    <li><router-link to="/">home</router-link></li>
    <li><router-link to="/login">login</router-link></li>
    <li><router-link :to="{ name: 'Login' }">login</router-link></li>
    <li><button @click="$router.push('/login')">login</button></li>
    <li>
      <button
        @click="
          $router.push({
            name: 'Login',
            query: {
              name: 'jack',
              age: 18,
            },
          })
        "
      >
        login
      </button>
    </li>
    <li><button @click="goLogin">login</button></li>
    <li><router-link to="/detail/111">detail 111</router-link></li>
    <li>
      <!-- 如果写对象形式，需要添加params参数，必须用命名路由 -->
      <router-link
        :to="{
          name: 'Detail',
          params: {
            id: 222,
          },
        }"
        >detail 222</router-link
      >
    </li>
  </ul>
  <!-- 加载渲染相应路由组件 -->
  <!-- 
    router-view 
      如果不传默认插槽，那么就会渲染相应的路由组件
      如果传了默认插槽，那么就会直接渲染默认插槽
      
      提供作用域插槽，将要渲染的路由组件以 Component 参数传递过来
        Component：要渲染相应的路由组件

    component 是 Vue 提供的动态组件
      本身啥也不渲染，看is属性，is属性的值是什么就渲染什么
   -->
  <!-- <router-view /> -->

  <router-view v-slot="{ Component }">
    <!-- <keep-alive :include="['Login']"> -->
    <transition name="fade">
      <keep-alive :exclude="['Login']" :max="10">
        <component :is="Component"></component>
      </keep-alive>
    </transition>
  </router-view>

  <div id="footer"></div>
</template>

<script lang="ts" setup>
/*
  前端路由：
    1. 作用：用来开发单页面应用（SPA）
    2. 特点：
      整个应用只有一个完整页面，所有更新都在这个页面中更新的
      点击链接不会刷新，只会局部更新
    3. 两种模式：
      - hash
        路径带#
        兼容性更好
        实现原理不一样
          通过 window.location.hash 改变路由路径
          通过 window.onhashchange 事件，监听路由路径的变化，做局部更新

      - history
        路径没有#
        兼容性稍差
        实现原理不一样
          通过 window.history.pushState/replaceState 改变路由路径
          通过 window.onpopstate 事件，监听路由路径的变化，做局部更新

      因为history没有#，路径更美观，所以开发主要用history模式

      4. 提供两个组件
        router-link 路由跳转（声明式导航）
        router-view 加载显示（渲染）路由组件

      5. 提供两个属性
        $router 路由跳转（编程式导航）
          $router.push/replace/go/back()

          const router = useRouter();
          router.push/replace/go/back();
        $route 获取路由信息（路由路径、路径参数）
          $route.path     路由路径
          $route.params   路由params参数
          $route.query    路由query参数
          $route.meta     路由meta参数

          const route = useRoute();
          route.path/params/query/meta;

      6. 缓存路由组件
        keep-alive
*/
import { useRouter } from "vue-router";

const router = useRouter();

const goLogin = () => {
  router.push("/login");
};
</script>

<style>
/*
  Vue2中transition
    显示到隐藏 leave
      .xxx-leave
      .xxx-leave-active
      .xxx-leave-to
    隐藏到显示 enter
      .xxx-enter
      .xxx-enter-active
      .xxx-enter-to

  Vue3中transition
    显示到隐藏 leave
      .xxx-leave-from
      .xxx-leave-active
      .xxx-leave-to
    隐藏到显示 enter
      .xxx-enter-from
      .xxx-enter-active
      .xxx-enter-to
*/

.fade-enter-from {
  opacity: 0;
}

.fade-enter-active {
  transition: opacity 1s;
}

.fade-enter-to {
  opacity: 1;
}
</style>
